<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 学生操作</el-breadcrumb-item>
                <el-breadcrumb-item>学生信誉</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card>
            <el-row :span="24">
                <el-col :span="16"></el-col>
                <el-col></el-col>
            </el-row>

            <el-row :gutter="24" style="margin-bottom: 15px">
                <el-col :span="3">
                    <el-tag type="primary">优秀:90-100分</el-tag>
                </el-col>
                <el-col :span="3">
                    <el-tag type="success">良好:80-89分</el-tag>
                </el-col>
                <el-col :span="3">
                    <el-tag type="warning">一般:70-79分</el-tag>
                </el-col>
                <el-col :span="3">
                    <el-tag type="danger">合格:60-69分</el-tag>
                </el-col>
                <el-col :span="3">
                    <el-tag type="info">不及格:60分以下</el-tag>
                </el-col>
                <el-col :span="6">
                    <el-alert title=" 鼠标移上去可查看具体分数" type="info" effect="dark" show-icon :closable="false" />
                </el-col>
                <el-col :span="3">
                    <el-popover
                        placement="top-start"
                        title="规则"
                        width="200"
                        trigger="hover"
                        content="这是一些规则!点击查看"
                        style="margin-left: 50px"
                    >
                        <el-button
                            slot="reference"
                            class="rule_button"
                            icon="el-icon-warning-outline"
                            size="mini"
                            type="warning"
                            @click="table = true"
                        />
                    </el-popover>
                </el-col>
            </el-row>

            <el-table :data="studentList" style="width: 100%" stripe fit highlight-current-row current-row-key :row-style="{ height: '52px' }">
                <el-table-column label="学生 ID" prop="stu_id" />
                <el-table-column label="学生名称" prop="stu_name" />
                <el-table-column label="诚信分">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="'标准:' + scope.row.stu_honesty + '分'" placement="right-start">
                            <el-tag v-if="90 <= scope.row.stu_honesty">优秀</el-tag>
                            <el-tag v-else-if="80 <= scope.row.stu_honesty" type="success">良好</el-tag>
                            <el-tag v-else-if="70 <= scope.row.stu_honesty" type="warning">一般</el-tag>
                            <el-tag v-else-if="60 <= scope.row.stu_honesty" type="danger">合格</el-tag>
                            <el-tag v-else type="info">不及格</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="积极分">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="'积极:' + scope.row.stu_active + '分'" placement="right-start">
                            <el-tag v-if="90 <= scope.row.stu_active">优秀</el-tag>
                            <el-tag v-else-if="80 <= scope.row.stu_active" type="success">良好</el-tag>
                            <el-tag v-else-if="70 <= scope.row.stu_active" type="warning">一般</el-tag>
                            <el-tag v-else-if="60 <= scope.row.stu_active" type="danger">合格</el-tag>
                            <el-tag v-else type="info">不及格</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="初始分">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="'初始:' + scope.row.stu_init + '分'" placement="right-start">
                            <el-tag v-if="90 <= scope.row.stu_init">优秀</el-tag>
                            <el-tag v-else-if="80 <= scope.row.stu_init" type="success">良好</el-tag>
                            <el-tag v-else-if="70 <= scope.row.stu_init" type="warning">一般</el-tag>
                            <el-tag v-else-if="60 <= scope.row.stu_init" type="danger">合格</el-tag>
                            <el-tag v-else type="info">不及格</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button class="detail mybutton1"  icon="el-icon-s-opportunity" @click="message(scope.row)"
                            >扣分详情</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page"
                    :page-size="10"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </el-card>

        <el-dialog :visible.sync="dialogTableVisible" title="扣分详情" size="50%">
            <el-alert title="该学生的违规详情" :closable="false" type="warning" center show-icon />
            <el-table :data="messageList">
                <el-table-column property="date" label="扣分日期" width="250" />
                <el-table-column property="uname" label="学生名" width="100" />
                <el-table-column property="aname" label="扣分人员" />
                <el-table-column property="type" label="扣分类型" />
                <el-table-column property="message" label="扣分信息" />
                <el-table-column property="delnum" label="扣分数" />
            </el-table>
        </el-dialog>

        <el-dialog title="扣分规则" :visible.sync="table" size="50%">
            <el-collapse accordion>
                <el-collapse-item title="积极" name="1">
                    <div>1、一天2个小时+1分</div>
                    <div>2、学习5个小时+2分</div>
                </el-collapse-item>
                <el-collapse-item title="诚信" name="2">
                    <div>1、按时归还+5</div>
                    <div>2、三天内归还-5</div>
                    <div>3、一周内归还-10</div>
                    <div>4、一个月内归还-15</div>
                    <div>5、30天还未归还直接管理员拉黑</div>
                </el-collapse-item>
                <el-collapse-item title="初始" name="3">
                    <div>1、未还一本书扣4分</div>
                    <div>2、超时还书扣3分</div>
                    <div>3、书籍损扣5分.六。低于80，无法借书。</div>
                </el-collapse-item>
            </el-collapse>
        </el-dialog>
    </div>
</template>

<script>
import { fetCredit } from '../../api/index';
export default {
    name: 'upload',
    data: function () {
        return {
            page:0,
            studentList:[],
            active: 0,
            table: false,
            list: [],
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,
            dialogTableVisible: false,
            messageList: []
        };
    },
    components: {},
    created() {
        this.getDataList();
    },
    methods: {
        getDataList() {
            fetCredit(this.query).then((res) => {
                this.list = res.list;
                this.pageTotal = res.pageTotal || 50;
                this.studentList = this.list.slice(0,10)
            });
        },
        message(role) {
            this.messageList = role.messages;
            this.dialogTableVisible = true;
        },
        // 分页导航
        handlePageChange(val) {
            this.studentList = this.list.slice((val-1) * 10,val*10)
        },
    }
};
</script>

<style scoped>
.el-steps {
}
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.mybutton1 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(108, 174, 194);
}
.mybutton1:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(3, 58, 161);
}

.mybutton2 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(250, 136, 55);
}
.mybutton2:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(219, 107, 28);
}

.mybutton3 {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(197, 45, 7);
}
.mybutton3:hover {
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(150, 33, 3);
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>